/*
 * Copyright (C) 2022 KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

import QtQuick 2.0
import QtQml 2.12
import org.ukui.tablet 1.0
import org.ukui.qqc2style.private 1.0 as StylePrivate
import "."

Rectangle {
    id: timeComponent
    property string hour;
    property string minute;
    property var timeStr: ""
    property var dateStr: ""
    property int ampmHeight: 10 * Style.tabletScaleFactor
    property int timeHeight: 18 * Style.tabletScaleFactor
    property int topSpace: 9 * Style.tabletScaleFactor
    property int dateHeight: 10 * Style.tabletScaleFactor
    property int timeToAmpmSpace: 4 * Style.tabletScaleFactor
    property int dateToTimeSpace: 5 * Style.tabletScaleFactor

    width: 53 * Style.tabletScaleFactor
    height: timerBack.height
    color: "transparent"

    TrayIconWatcher {
        id: timeDateWatcher
        type: TrayIconWatcher.TimeDate
    }

    state: timeDateWatcher.timeformat
    states: [
        State {
            name: "12"
            PropertyChanges {
                target: ampmBackground
                visible: true
            }
            PropertyChanges {
                target: timeBackground
                anchors.top: ampmBackground.bottom
                anchors.topMargin: timeToAmpmSpace
            }
            StateChangeScript { script: {
                    topSpace = 9 * Style.tabletScaleFactor
                    dateToTimeSpace = 5 * Style.tabletScaleFactor
                }
            }
        },
        State {
            name: "24"
            PropertyChanges {
                target: ampmBackground
                visible: false
            }
            PropertyChanges {
                target: timeBackground
                anchors.top: timeComponent.top
                anchors.topMargin: topSpace
            }
            StateChangeScript { script: {
                    topSpace = 14 * Style.tabletScaleFactor
                    dateToTimeSpace = 7 * Style.tabletScaleFactor
                }
            }
        }
    ]


    Timer {
        id: gettime;
        interval: 100;
        running: true;
        repeat: true;
        triggeredOnStart: true
        onTriggered: {
            timeStr = Qt.formatTime(new Date(),"hh mm AP").trim().split(/\s+/)
            dateStr = Qt.formatDate(new Date(),"MM dd ddd").trim().split(/\s+/)
            if(timeDateWatcher.timeformat === "12") {
                hour = timeStr[0]
            } else {
                hour = Qt.formatTime(new Date(),"hh");
            }
            minute = timeStr[1]
            time.text = hour + ":" + minute
            ampm.text = timeStr[2]

            if(timeDateWatcher.dateformat == "cn") {
                date.text = dateStr[0] + "/" + dateStr[1] + " " + dateStr[2]
            }
            if(timeDateWatcher.dateformat == "en") {
                date.text = dateStr[0] + "-" + dateStr[1] + " " + dateStr[2]
            }
        }
    }

    Rectangle {
        id: ampmBackground
        color: "transparent"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: topSpace
        width: timeComponent.width
        height: ampmHeight
        Text {
            id: ampm
            color: StylePrivate.StyleHelper.windowtextcolorrole
            font.pointSize: 9 * Style.tabletScaleFactor
            font.family: StylePrivate.StyleHelper.font.family
            font.styleName: StylePrivate.StyleHelper.font.styleName
            anchors.centerIn: parent
        }
    }
    Rectangle {
        id: timeBackground
        color: "transparent"
        width: timeComponent.width
        anchors.horizontalCenter: parent.horizontalCenter
        height: timeHeight
        Text {
            id: time
            color: StylePrivate.StyleHelper.windowtextcolorrole
            font.pointSize: 18 * Style.tabletScaleFactor
            font.family: StylePrivate.StyleHelper.font.family
            font.styleName: StylePrivate.StyleHelper.font.styleName
            anchors.centerIn: parent
        }
    }


    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: timeBackground.bottom
        anchors.topMargin: dateToTimeSpace
        height: ampmHeight
        width: parent.width
        color: "transparent"
        Text {
            id: date
            color: StylePrivate.StyleHelper.windowtextcolorrole
            font.pointSize: 9 * Style.tabletScaleFactor
            font.family: StylePrivate.StyleHelper.font.family
            font.styleName: StylePrivate.StyleHelper.font.styleName
            anchors.centerIn: parent
        }
    }

    Component.onCompleted: gettime.start();
}
